<template>
  <div style="height: 100%; overflow: hidden;">
    <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>

    <div class="weui-tab">
      <div class="weui-tab__panel"  :class="{'fullScroll': !tabbarStatus}">
        <router-view  class="router-view"></router-view>
      </div>
      <!-- 运营商 S -->
      <div v-if="role === '2' && tabbarStatus" class="weui-tabbar">
        <a href="javascript:;" @click="toggleTabbar('/choose')" class="weui-tabbar__item" :class="{'weui-bar__item_on': route.name === 'a'}">
          <!--<div alt="" class="weui-tabbar__icon scan"></div>-->
          <svg class="icon-symbol" aria-hidden="true" v-if="route.name === 'a'">
            <use xlink:href="#icon-saoma-hover"></use>
          </svg>
          <svg class="icon-symbol" aria-hidden="true" v-else>
            <use xlink:href="#icon-saoma"></use>
          </svg>
          <p class="weui-tabbar__label">扫码</p>
        </a>
        <a href="javascript:;" @click="toggleTabbar('/device')" class="weui-tabbar__item" :class="{'weui-bar__item_on': route.name === 'device'}">
          <!--<div alt="" class="weui-tabbar__icon device"></div>-->
          <svg class="icon-symbol" aria-hidden="true" v-if="route.name === 'device'">
            <use xlink:href="#icon-shebei-hover"></use>
          </svg>
          <svg class="icon-symbol" aria-hidden="true" v-else>
            <use xlink:href="#icon-shebei1"></use>
          </svg>
          <p class="weui-tabbar__label">设备</p>
        </a>
        <a href="javascript:;" @click="toggleTabbar('/operating')" class="weui-tabbar__item" :class="{'weui-bar__item_on': route.name === 'operating'}">
          <!--<div alt="" class="weui-tabbar__icon operation"></div>-->
          <svg class="icon-symbol" aria-hidden="true" v-if="route.name === 'operating'">
            <use xlink:href="#icon-yunying-hover"></use>
          </svg>
          <svg class="icon-symbol" aria-hidden="true" v-else>
            <use xlink:href="#icon-yunying"></use>
          </svg>
          <p class="weui-tabbar__label">运营</p>
        </a>
        <a href="javascript:;" @click="toggleTabbar('/userinfo/' + (openId ? openId : '-1'))" class="weui-tabbar__item" :class="{'weui-bar__item_on': route.name === 'userinfo'}">
          <!--<div alt="" class="weui-tabbar__icon my"></div>-->
          <svg class="icon-symbol" aria-hidden="true" v-if="route.name === 'userinfo'">
            <use xlink:href="#icon-wode-hover"></use>
          </svg>
          <svg class="icon-symbol" aria-hidden="true" v-else>
            <use xlink:href="#icon-wode"></use>
          </svg>
          <p class="weui-tabbar__label">我</p>
        </a>
      </div>
      <!-- 运营商 S -->

      <!-- 用户 S -->
      <div v-else-if="role === '1' && tabbarStatus" class="weui-tabbar"
        v-show="tabbarStatus">
        <a href="javascript:;" @click="toggleTabbar('/choose')" class="weui-tabbar__item" :class="{'weui-bar__item_on': route.name === 'a'}">
          <!--<div alt="" class="weui-tabbar__icon scan"></div>-->
          <svg class="icon-symbol" aria-hidden="true" v-if="route.name === 'a'">
            <use xlink:href="#icon-saoma-hover"></use>
          </svg>
          <svg class="icon-symbol" aria-hidden="true" v-else>
            <use xlink:href="#icon-saoma"></use>
          </svg>
          <p class="weui-tabbar__label">扫码</p>
        </a>
        <a href="javascript:;" @click="toggleTabbar('/orderLoading/' + (openId ? openId : '-1'))" class="weui-tabbar__item" :class="{'weui-bar__item_on': route.name === 'orderLoading'}">
          <!--<div alt="" class="weui-tabbar__icon indent"></div>-->
          <svg class="icon-symbol" aria-hidden="true" v-if="route.name === 'orderLoading'">
            <use xlink:href="#icon-dingdan-hover"></use>
          </svg>
          <svg class="icon-symbol" aria-hidden="true" v-else>
            <use xlink:href="#icon-dingdan"></use>
          </svg>
          <p class="weui-tabbar__label">订单</p>
        </a>
        <a href="javascript:;" @click="toggleTabbar('/userinfo/' + (openId ? openId : '-1'))" class="weui-tabbar__item" :class="{'weui-bar__item_on': route.name === 'userinfo'}">
          <!--<div alt="" class="weui-tabbar__icon my"></div>-->
          <svg class="icon-symbol" aria-hidden="true" v-if="route.name === 'userinfo'">
            <use xlink:href="#icon-wode-hover"></use>
          </svg>
          <svg class="icon-symbol" aria-hidden="true" v-else>
            <use xlink:href="#icon-wode"></use>
          </svg>
          <p class="weui-tabbar__label">我</p>
        </a>
      </div>
      <!-- 用户 E -->
    </div>
  </div>
</template>

<script>
  import './styles/user/index.scss'
  import loading from '@/components/loading';
  import TransferDom from '@/directives/transfer-dom/'
  import { mapState } from 'vuex'
//  import * as api from 'api';
  export default {
    directives: {
      TransferDom
    },
    name: 'app',
    data () {
      return {
        isShow: false,
        selected: '我的'
      }
    },

    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        isLoading: state => state.V.isLoading,
        openId: state => state.userInfo.openId,
        role: state => state.userInfo.role,
        userInfo: state => state.userInfo
      }),
      tabbarStatus () {
        return this.route.name === 'userinfo' ||
          this.route.name === 'orderLoading' ||
          this.route.name === 'device' ||
          this.route.name === 'operating'
      }
    },

    components: {
      loading
    },

    created () {
    },

    methods: {
      click () {
        this.isShow = !this.isShow;
      },

      toggleTabbar (type) {
        if (type === '/choose') {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              console.log(JSON.stringify(result));
              window.location.href = res.resultStr;
            },
            fail: function (err) {
              console.log(err);
            }
          });
          this.onItem = type;
          return false;
        }
        this.onItem = type;
        this.$router.push(type)
        // api.getUserInfo({})
        //   .then(res => {
        //     alert('成功');
        //   })
        //   .catch(err => {
        //     alert('失败' + err)
        //   })
      }
    },

    mounted () {
    }
  }
</script>

<style lang="scss">
  @import './styles/user/index.scss';
  @mixin bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY){
    background-position: (($iconX / ($spriteWidth - $iconWidth)) * 100% ($iconY / ($spriteHeight - $iconHeight)) * 100%);
  }
  @font-face {
    font-family: 'iconfont';  /* project id 370450 */
    src: url('//at.alicdn.com/t/font_370450_kpdepy4ijcsaif6r.eot');
    src: url('//at.alicdn.com/t/font_370450_kpdepy4ijcsaif6r.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_370450_kpdepy4ijcsaif6r.woff') format('woff'),
    url('//at.alicdn.com/t/font_370450_kpdepy4ijcsaif6r.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_370450_kpdepy4ijcsaif6r.svg#iconfont') format('svg');
  }
  [v-cloak] {
    display: none;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  .router-view {
    width: 100%;
    top: 0;
    overflow: hidden;
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  .fullScroll {
    padding-bottom: 0!important;
  }
  .unified-bg {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 0;
      height: px2rem(180);
      @include bis('imgs/nav-bg.jpg');
    }
  }
  .weui-tabbar__icon {
    background-size: px2rem(100) px2rem(869);
    background-image: url('./imgs/sprite.png');
    width: px2rem(50);
    height: px2rem(50);
    &.scan {
      background-position: 0 px2rem(-520);
    }
    &.indent {
      background-position: 0 px2rem(-173);
    }
    &.my {
      background-position: 0 px2rem(-273);
    }
    &.device {
      background-position: 0 px2rem(-323);
    }
    &.operation {
      background-position: 0 px2rem(-376);
    }
  }
  .weui-bar__item_on {
    .weui-tabbar__icon {
      &.scan {
        background-position: 0 px2rem(-450);
      }
      &.indent {
        background-position: 0 px2rem(-123);
      }
      &.my {
        background-position: 0 px2rem(-223);
      }
      &.device {
        background-position: 0 px2rem(-423);
      }
      &.operation {
        background-position: 0 px2rem(-76);
      }
    }
  }
  .icon-hgj {
    background-image: url(./imgs/sprite.png);
    background-size: px2rem(100) px2rem(869);
    background-position: 0 px2rem(-669);
    width: px2rem(100);
    height: px2rem(100);
  }
  .icon-xyj {
    display: inline-block;
    background-image: url(./imgs/sprite.png);
    background-size: px2rem(100) px2rem(869);
    background-position: 0 px2rem(-769);
    width: px2rem(100);
    height: px2rem(100);
  }
  .icon-time-btn {
    display: inline-block;
    background-image: url(./imgs/sprite.png);
    background-size: px2rem(100) px2rem(869);
    background-position: 0 px2rem(-48);
    width: px2rem(25);
    height: px2rem(25);
   }
  .icon-HGJ-kg {
    display: inline-block;
    background-image: url(./imgs/sprite.png);
    background-size: px2rem(100) px2rem(869);
    width: px2rem(37);
    height: px2rem(24);
  }
  .icon-XYJ-Kg {
    display: inline-block;
    background-image: url(./imgs/sprite.png);
    background-size: px2rem(100) px2rem(869);
    background-position: 0 px2rem(-24);
    width: px2rem(37);
    height: px2rem(24);
  }
  .icon-qianbao {
    display: inline-block;
    background-image: url(./imgs/sprite.png);
    background-size: px2rem(100) px2rem(869);
    background-position: 0 px2rem(-573);
    width: px2rem(96);
    height: px2rem(96);
  }
  .icon-time {
    display: inline-block;
    background-image: url(./imgs/sprite.png);
    background-size: px2rem(100) px2rem(869);
    background-position: 0 px2rem(-48);
    width: px2rem(25);
    height: px2rem(25);
  }
  .weui-btn::after {
    border: none!important;
  }
  .success-notice {
    background-color: #09BB07!important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: transparent;
  }

</style>
